<template>
  <div class="fxBox">
    <div class="fxBox__top">
      <el-radio-group v-model="chooseRadio">
        <el-radio label="noUse">不使用返利</el-radio>
        <el-radio label="amount">固定金额</el-radio>
        <el-radio label="percent">百分比</el-radio>
      </el-radio-group>
      <div class="fxBox__top--tip">
        购买商品获得返利金额，不使用返利即商品不参与返利，可前往
        <el-button type="text">返利设置</el-button>配置相关返利条件
      </div>
    </div>
    <div
      class="fxBox__list"
      v-if="chooseRadio != 'noUse'"
      :style="{
        height: reList.length > 1 ? '400px' : '140px',
      }"
    >
      <div class="fxBox__list--firLine">
        <div class="vipItem" v-if="reList.length > 1">规格值</div>
        <div class="vipItem">实售价</div>
        <div class="vipItem">指导价</div>
        <div class="vipItem">返利金额</div>
      </div>
      <div
        class="fxBox__list--skuLine"
        :style="{ height: reList.length > 4 ? '273px' : '' }"
      >
        <div
          v-for="(item, index) in reList"
          :key="index"
          class="skuLine"
          :style="{
            borderBottom: reList.length > 1 ? '1px solid #ebedf1' : 'none',
          }"
        >
          <div class="skuLine__name" v-if="reList.length > 1">
            {{ item.specs }}
          </div>
          <div class="skuLine__center" style="width: 70px">
            ￥{{ item.price }}
          </div>
          <div class="skuLine__center" style="width: 180px">
            ￥{{ item.originalPrice }}
          </div>
          <el-input-number
            :min="0"
            :controls="false"
            v-model="item.rePrice"
            style="width: 125px; margin: 0px 13px"
          >
            <div slot="append">{{ chooseRadio === "amount" ? "元" : "%" }}</div>
          </el-input-number>
        </div>
      </div>
      <div
        class="fxBox__list--firLine"
        v-if="reList.length > 1"
        style="
          padding-right: 20px;
          margin-top: 20px;
          position: absolute;
          left: 0px;
          bottom: 0px;
        "
      >
        <div style="display: flex; width: 353px; align-items: center">
          <div style="margin-right: 10px">批量设置</div>
          <el-switch
            v-model="setValue"
            active-color="#006EFF"
            inactive-color="#D7D7D7"
          ></el-switch>
        </div>
        <el-input-number
          :min="0"
          :controls="false"
          v-model="rePrice"
          style="width: 125px; margin: 0px 13px"
        >
          <div slot="append">{{ chooseRadio === "amount" ? "元" : "%" }}</div>
        </el-input-number>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
//#endregion
import { Vue, Component, Prop, Watch } from "vue-property-decorator";

@Component
export default class Distribution extends Vue {
  @Prop({
    type: String,
    default() {
      return "";
    },
  })
  tagType: any;

  @Watch("tagType")
  getType() {
    if (this.tagType === "2") {
      this.getSku();
    }
  }

  reList = [];

  chooseRadio = "noUse";

  setValue = false;

  rePrice = "";

  /** 
  获取商品已设置规格
   */
  getSku() {
    this.reList = [];
    const good = this.$parent.$parent.$parent.good;
    if (good.goodDetail) {
      if (good.componentRef.formModel.limitType === 0) {
        this.reList.push({
          originalPrice: good.componentRef.formModel.originalPrice
            ? good.componentRef.formModel.originalPrice
            : good.componentRef.formModel.skuStocks[0].originalPrice,
          price: good.componentRef.formModel.price
            ? good.componentRef.formModel.price
            : good.componentRef.formModel.skuStocks[0].price,
        });
      } else {
        this.reList = good.componentRef.formModel.skuStocks;
      }
      return;
    }
    if (good.componentRef.formModel.limitType === 0) {
      this.reList.push({
        originalPrice: good.componentRef.formModel.originalPrice,
        price: good.componentRef.formModel.price,
        rePrice: "",
      });
    } else {
      this.reList = good.componentRef.formModel.skuStocks;
    }
  }
}
</script>

<style lang="scss" scoped>
@include b(fxBox) {
  margin-top: 40px;
  @include e(top) {
    display: flex;
    align-items: center;
    @include m(tip) {
      font-size: 12px;
      margin-left: 40px;
      color: #aeaeae;
    }
  }

  @include e(list) {
    margin-top: 20px;
    height: 400px;
    border: 1px solid #ebedf1;
    width: 834px;
    overflow-x: auto;
    display: -webkit-box;
    position: relative;

    @include m(firLine) {
      height: 50px;
      width: 100%;
      display: flex;
      align-items: center;
      padding-left: 25px;
      padding-right: 30px;
      background-color: #f2f4f7;
      @include m(vip) {
        width: 450px;
        display: flex;
      }
      .vipItem {
        margin-right: 46px;
        width: 80px;
        display: flex;
      }
    }

    @include m(skuLine) {
      position: absolute;
      top: 55px;
      left: 0px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      // width: 100%;
      overflow: auto;

      .skuLine {
        display: flex;
        align-items: center;
        // margin-bottom: 20px;
        // padding-bottom: 20px;
        border-bottom: 1px solid #ebedf1;
        padding-right: 33px;
        height: 70px;
        width: 100%;

        &__name {
          width: 130px;
          display: flex;
          justify-content: flex-start;
          padding-left: 25px;
        }

        &__center {
          display: flex;
          justify-content: center;
        }
      }

      .vipLine {
        display: flex;
        width: 150px;
        justify-content: center;
      }
    }
  }
}
.fxBox__list--skuLine::-webkit-scrollbar {
  display: none;
}
// .fxBox__list--firLine--vip::-webkit-scrollbar {
//   // display: none;
//   height: 2px;
//   padding-top: 5px;
// }
</style>
